<template>
  <div class="chart-container">

    <div :class="[list.length>5?'normal-container_warp':'normal-container']">
      <div class="legend" v-for="(item) in list" :key="item.id">
      
        <div class="legend_item">{{item.name}}</div>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "demoTwenty9",
  filters: {},
  data() {
    return {
      propObj: [1, 2, 3],
      list:[{
         name:"1111aaaaaaaa",
         id:1,
      },
      {
         name:"22222bbbbbbbbb",
          id:2,
      },
      {
         name:"33333bbbbbbbbbbbbb",
          id:3,
      },
      {
         name:"1111aaaaaaaa",
         id:4,
      },
      {
         name:"22222bbbbbbbbb",
          id:5,
      },
      {
         name:"33333bbbbbbbbbbbbb",
          id:6,
      },
      {
         name:"1111aaaaaaaa",
         id:7,
      },
      {
         name:"22222bbbbbbbbb",
          id:8,
      },
      {
         name:"33333bbbbbbbbbbbbb",
          id:9,
      },
      {
         name:"1111aaaaaaaa",
         id:10,
      },
      {
         name:"22222bbbbbbbbb",
          id:11,
      },
      {
         name:"33333bbbbbbbbbbbbb",
          id:12,
      },
      {
         name:"33333bbbbbbbbbbbbb",
          id:13,
      },
      {
         name:"1111aaaaaaaa",
         id:14,
      },
      {
         name:"22222bbbbbbbbb",
          id:15,
      },
      {
         name:"33333bbbbbbbbbbbbb",
          id:16,
       },
      ]
    };
  },
  components: {},
  created() {},
  mounted() {
    //this.getPrototype()
    this.getPrototypTwo();
  },
  methods: {
    getPrototype() {
      var a = {};
      console.log(a.prototype); //undefined
      console.log(a.__proto__); //Object {}

      var b = function() {};
      console.log(b.prototype); //b {}
      console.log(b.__proto__); //function() {}
    },

    getPrototypTwo() {
      /*1、字面量方式*/
      var a = { name: "xiaoming" };
      console.log(a);
      console.log(a.constructor); //function Object() { [native code] } (即构造器Object）
      console.log(a.__proto__ === a.constructor.prototype); //true

      /*2、构造器方式*/
      var A = function() {};
      var a = new A();
      console.log(a.constructor); // function(){}（即构造器function A）
      console.log(a.__proto__ === a.constructor.prototype); //true

      /*3、Object.create()方式*/
      var a1 = { a: 1 };
      var a2 = Object.create(a1);
      console.log(a2.constructor); //function Object() { [native code] } (即构造器Object)
      console.log(a2.__proto__ === a1); // true
      console.log(a2.__proto__ === a2.constructor.prototype); //false（此处即为图1中的例外情况）
    }
  }
};
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}


  .normal-container{
    height: 30px;
    line-height: 30px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 100;
    font-size: small;
    flex-direction: row;
    align-items: center;
    display: flex;
  }
  .normal-container_warp{
    height: 30px;
    line-height: 30px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 100;
    font-size: small;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .legend{
    height: 20px;
    line-height: 20px;
    display: flex;
    margin: 0 5px
  }
  .legend_color{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 5px;
  }
  .legend_item{
    color: red;
  }




</style>
